<template>
  <div>
    <div class="wuliu">
      <div class="detail_a flex">
        <p>物流信息</p>
        <p @click="back_order()">返回订单列表</p>
      </div>
      <div class="wuliu_a">
        <p class="a_a">{{info.orderStatus}}</p>
        <p class="a_b">发货方式：快递</p>
        <p class="a_b">物流公司：{{info.logistics}}</p>
        <p class="a_b">运单号码：{{info.logisticsno}}</p>
        <div class="a_b wuliu_con">
          <p>物流跟踪：</p>
          <div v-if="info.result">
            <p v-for="(list,index) in info.result.data" :key="index">{{list.context}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderinfo } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      info: {
        orderid:'',
        info:{}
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.orderid =
      this.$route.params.orderid || sessionStorage.getItem("orderid");
    sessionStorage.setItem("orderid", this.orderid);
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: this.orderid
      };
      orderinfo(this.qs(msg))
        .then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            if (res.data.ykOrder.orderStatus == "0") {
              res.data.ykOrder.orderStatus = "待付款";
            } else if (res.data.ykOrder.orderStatus == "1") {
              res.data.ykOrder.orderStatus = "待发货";
            } else if (res.data.ykOrder.orderStatus == "2") {
              res.data.ykOrder.orderStatus = "待收货";
            } else if (res.data.ykOrder.orderStatus == "3") {
              res.data.ykOrder.orderStatus = "已完成";
            }
            if (res.data.ykOrder.result) {
              res.data.ykOrder.result = JSON.parse(res.data.ykOrder.result);
            } 

            this.info = res.data.ykOrder;
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    back_order() {
      this.$router.push({
        name: "order"
      });
    }
  },
  components: {}
};
</script>

<style scoped>
.wuliu {
  width: 1027px;
  background: rgba(255, 255, 255, 1);
  padding-bottom: 50px;
}
.detail_a {
  justify-content: space-between;
  margin-left: 39px;
  margin-right: 37px;
  padding-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.detail_a > p:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.detail_a > p:nth-child(2) {
  width: 105px;
  height: 30px;
  background: rgba(216, 20, 23, 1);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1) !important;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.wuliu_a {
  margin-left: 40px;
}
.a_a {
  font-size: 16px;
  color: rgba(0, 0, 0, 1);
  margin: 15px 0;
}
.a_b {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 8px;
}
.wuliu_con {
  display: flex;
}
.wuliu_con > p {
  width: 90px;
}
.wuliu_con > div {
  width: 859px;
}
.wuliu_con > div > p:nth-child(1) {
  color: #f65812 !important;
}
.wuliu_con > div > p {
  margin-bottom: 10px;
}
</style>
